<template>
  <div class="cart">
    <Header title="购物车" :edit="true" />
    <CartDetails v-if="isShow" :changeShow="changeShow" />
    <Blank v-else />
    <Footer />
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue";
import Blank from "../../components/Blank.vue";
import Header from "../../components/Header.vue";
import CartDetails from "./components/CartDetails.vue";

export default {
  components: {
    Footer,
    Blank,
    Header,
    CartDetails,
  },
  data(){
    return{
      isShow: true,
    }
  },
  mounted(){
    this.init();
  },
  methods: {
    // 初始化兜底样式展示与否
    init(){
      if (this.$store.state.cartList.length === 0) {
        this.isShow = false;
      }
    },

    changeShow(){
      this.isShow = false;
    },
  },
};
</script>

<style lang='less' scoped>
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>